<template>
	<view>
		<view class="main">
			<view class="list">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="top-line">
						<view class="left">
							<view class="title">
								<view class="img-round mr10" />
								<view class="txt content-cut-one">{{item.name}}</view>
							</view>
							<view class="tag-list flexR-FS-C">
								<view class="tagItem" v-for="(item2, index2) in item.tools" :key="index">
									<uni-tag :text="item2" :inverted="true" type="warning"></uni-tag>
								</view>
							</view>
						</view>
					</view>

					<view class="bottom-line">
						<view class="num flexR-FS-C">
							<image class="numImg" :src="imagesMeetingUrl + 'person.png'"></image>
							{{item.person}}人
						</view>
						<view class="order" @click="handleYuyue(item)">预定</view>
					</view>
				</view>
			</view>

		</view>
		<tabbar />
	</view>
</template>

<script>
	import config from '@/configs/index.js'

	export default {
		data() {
			return {
				imagesMeetingUrl: config.IMAGES_URL_YQGJ + 'meeting/',

				dataList: [{
						name: '第一会议室',
						person: 10,
						tools: ['白板', '音箱']
					},
					{
						name: '第二会议室',
						person: 18,
						tools: ['白板', '音箱']
					},
					{
						name: '商务洽谈室',
						person: 40,
						tools: ['白板', '音箱', '投影仪', '话筒']
					},
					{
						name: '大会议室',
						person: 80,
						tools: ['白板', '音箱', '投影仪', '话筒']
					},
					{
						name: '第三会议室',
						person: 35,
						tools: ['白板', '音箱']
					},
				]
			}
		},
		methods: {
			handleYuyue(item) {
				const params = JSON.stringify(item)
				uni.navigateTo({
					url: "/sub-meeting/enroll_detail?enroll=" + params
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		padding: 30rpx 30rpx;
		background-color: #f2f2f2;
	}

	.list {
		width: 100%;
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: flex-start;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 25rpx;
			margin-bottom: 30rpx;

			.top-line {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.title {
						flex: 1;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.img-round {
							width: 14rpx;
							height: 14rpx;
							background-color: #fff;
							border-radius: 50%;
							border: 4rpx solid #2870E5;
						}

						.txt {
							font-size: 32rpx;
							color: #000;
							font-weight: bold;
							flex: 1;
						}
					}
				}

				.pic {
					width: 130rpx;
					height: 90rpx;
					border-radius: 10rpx;
					opacity: .9;
				}
			}

			.tag-list {
				width: 100%;
				margin-top: 20rpx;

				.tagItem {
					margin-right: 20rpx;
				}
			}

			.bottom-line {
				margin-top: 20rpx;
				border-top: 1rpx dashed #ccc;
				font-size: 26rpx;
				width: 100%;
				display: flex;
				align-content: center;
				justify-content: space-between;
				padding: 20rpx 0rpx 0rpx;

				.num {
					width: 200rpx;

					.numImg {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.order {
					color: #fff;
					background-color: #2870E5;
					padding: 5rpx 25rpx;
					border-radius: 25rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>